<template>
    <div>

      <div style="width: 100%;height: 100%">
        <div class="xueshan01"></div>
        <div class="xueshan02"></div>
      </div>
      <div class="bear"></div>

    </div>
</template>

<script>
export default {
  name: "play"
}
</script>

<style lang="scss" scoped>

.xueshan01 {
  position: absolute;
  height: 300px;
  width: 100%;
  bottom: 0;
  z-index: 2;
  background: url('../../assets/images/xueshan01.png') repeat-x;
  background-size: 100% 100%;
  animation: moun 30s linear infinite;
}

 .xueshan02 {
   position: absolute;
   width: 100%;
   height: 500px;
   bottom: 0;
   z-index: 1;
   background: url('../../assets/images/xueshan02.png') repeat-x;
   background-size: 100% 100%;
   animation: moun 30s linear infinite;
 }

 .bear {
   position: absolute;
   width: 200px;
   height: 100px;
   bottom: 0;
   background: url('../../assets/images/bear.png') no-repeat;
   z-index: 3;
   animation: bear 0.9s steps(8) infinite, move 3s forwards;
 }

 @keyframes bear {
   0% {
     background-position: 0 0;
   }

   100% {
     background-position: -1600px 0;
   }

 }

 @keyframes move {
   0% {
     left: 0;
   }

   100% {
     left: 50%;
     margin-left: -100px;
   }

 }

@keyframes moun {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1951.25px 0;
  }
}
</style>
